<template>
  <div></div>
  <p v-text="title"></p>
  <p v-html="htmlContent"></p>
  <div v-show="flag" class="box">我是v-show控制的盒子</div>
  <div v-if="flag" class="box">我是v-if控制的盒子</div>
  <button @click="toggle">显示/隐藏</button>

  <div id="app">
    <p v-if="gender === 0">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <hr />
    <p v-if="score >= 90">成绩评定A:奖励电脑一台</p>
    <p v-else-if="score >= 80 && score < 90">成绩评定B:奖励周末郊游</p>
    <p v-else-if="score >= 70 && score < 80">成绩评定C:奖励零食礼包</p>
    <p v-else>成绩评定D:惩罚一周不能玩手机</p>
  </div>
</template>

<script setup lang="ts">
const title = '测试v-text'
const htmlContent = '<h2>这是一个<strong>非常优秀</strong>的boy<h2>'

import { ref } from 'vue'

const flag = ref(false)
const toggle = () => {
  flag.value = !flag.value
}

// 1. 性别
const gender = ref(0) // 0-男 1-女
// 2. 成绩
const score = ref(95)
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}
</style>
